<template>
  <transition name="sysmtemenus">
    <div class="system-menus" ref="menusRef" :class="{'h5-menus': piniaSystem.getIsH5, 'menus-close': !isOpen}" v-show="h5MenuOpen">
      <transition name="sysmtemenuswrapper">
      <div class="system-menus-wrapper" v-show="h5MenuOpen">
        <div class="menu-switch" v-if="!piniaSystem.getIsH5" @click="toggleMenu">
          <i-line-md-menu-unfold-left v-if="isOpen"/>
          <i-line-md-menu-unfold-right v-else/>
        </div>
        <div class="h5-menu-switch" v-if="piniaSystem.getIsH5" @click="closeMenuForH5">
          <i-ph-caret-double-left-duotone />
        </div>
        <div class="system-menus-playbox">
          <div class="logo-pc">
            <transition name="openlogo">
              <img :src="`https://ugaming.s3.ap-southeast-1.amazonaws.com/playChannelMedium/2023/01/14/f9735811-cf10-4994-8bf8-25893baf62a1.png`" v-show="isOpen"/>
            </transition>
            <transition name="closelogo">
              <img :src="`https://ugaming.s3.ap-southeast-1.amazonaws.com/playChannelSmall/2023/01/15/e46b4d99-0735-4e5b-afc4-658dacc2a721.png`" v-show="!isOpen"/>
            </transition>
          </div>
          <div class="system-menus-playbox__banner" v-if="isOpen">
            <img :src="images.thirdBanner" alt="">
          </div>
          <van-collapse v-model="activeNames" v-if="isOpen">
            <van-collapse-item :title="`${t('home.WinGames') + t('home.Casino')}`" name="1">
              <ul class="system-menus-game-list">
                <li v-for="item in popularGames" :key="item.id" @click="gotoPlay(item)">
                  <div class="">
                    <img v-zlazy="item.imgPlay" alt="">
                    <h3>{{ item.name }}</h3>
                  </div>
                </li>
              </ul>
            </van-collapse-item>
            <van-collapse-item :title="`${t('Sport.MyCollection')}`" name="2">
              <ul class="system-menus-game-list">
                <li v-for="item in collect" :key="item.id" @click="gotoPlay(item)">
                  <div class="">
                    <img v-zlazy="item.imgPlay" alt="">
                    <h3>{{ item.name }}</h3>
                  </div>
                </li>
              </ul>
            </van-collapse-item>
            <van-collapse-item :title="`${t('home.recentPlay')}`" name="3">
              <ul class="system-menus-game-list">
                <li v-for="item in recent" :key="item.id" @click="gotoPlay(item)">
                  <div class="">
                    <img v-zlazy="item.imgPlay" alt="">
                    <h3>{{ item.name }}</h3>
                  </div>
                </li>
              </ul>
            </van-collapse-item>
          </van-collapse>
        </div>
      </div>
      </transition>
    </div>
  </transition>
  <TipsRecharge v-model:visible="showTipsRecharge"/>
</template>

<script setup lang="ts" name="MenusForPlaybox">
import system from '@/store/system';
import homeApi from '@/api/modules/home';
import gamesApi from '@/api/modules/games';
import { isDark, toggleDark } from '@/utils/dark';
import gamesList from '@/store/games';
import userinfo from '@/store/userinfo';
import nocache from '@/store/nocache';

const route = useRoute();
const router = useRouter();
const { t, availableLocales, locale } = useI18n();
const piniaSystem = system(); // 系统设置
const piniaGamesList = gamesList();
const piniaUserinfo = userinfo();
const currentWallet: any = computed(()=> piniaUserinfo.getCurrentWallet);
const piniaNocache = nocache();

watch(
  () => piniaSystem.getLang,
  (val, preVal) => {
    getPopularGames();
  },
  { immediate: false, deep: true },
);


const images: any = reactive({
  thirdBanner: new URL(`../../assets/images/menus/thirdBanner.png`, import.meta.url).href,
});

const collect = computed(()=>{
  return piniaGamesList.getCollect.map((im:any)=>{
    const item = im.languageChildren.find((ele:any)=> ele.languageType === piniaSystem.getLang.code);
    return {
      ...im,
      name: item.languageName
    }
  })
})

const recent = computed(()=>{
  return piniaGamesList.getRecentGames.map((im:any)=>{
    const item = im.languageChildren.find((ele:any)=> ele.languageType === piniaSystem.getLang.code);
    return {
      ...im,
      name: item.languageName
    }
  })
})
// 变量
const data: any = reactive({
  isOpen: true,
  h5MenuOpen: piniaSystem.getIsH5 ? false : true,
  menusRef: null,
  langList: [],
  langplacement: 'top',
  langpopover: null,
  activeNames: [],
  popularGames: [],
  showTipsRecharge: false,
});

const {
  isOpen,
  h5MenuOpen,
  menusRef,
  langList,
  langplacement,
  langpopover,
  activeNames,
  popularGames,
  showTipsRecharge,
} = toRefs(data);

// 收起或者关闭菜单 pc
const toggleMenu = () => {
  isOpen.value = !isOpen.value;
  isOpen.value ? (langplacement.value = 'top') : (langplacement.value = 'right');
}

const closeMenuForH5 = () => {
  h5MenuOpen.value = false;
}

const openMenuForH5 = () => {
  h5MenuOpen.value = true;
}

// 获取语言配置
const playHallLanguageConfig = () => {
  homeApi.playHallLanguageConfig({channelId: '100000000'}).then((res:any)=>{
    langList.value = res.data || [];
  });
}
playHallLanguageConfig(); // 获取语言配置

// 获取热门游戏
const getPopularGames = () => {
  popularGames.value = piniaGamesList.getPopularGames.map((im:any)=>{
    const item = im.languageChildren.find((ele:any)=> ele.languageType === piniaSystem.getLang.code);
    return {
      ...im,
      name: item.languageName
    }
  })
}
getPopularGames();

piniaGamesList.setCollect();
piniaGamesList.setRecentGames();


const gotoPlay = (game:any) => {
  if(piniaUserinfo.getHaslogged){
    // 已经登录
    if(game.gameId && game.gameId.trim()){
      const data = {
        playId: game.playId,
        imgPlay: game.imgPlay,
        gameName: game.gameName,
        fromPath: route.fullPath,
      }
      if(currentWallet.value.money > 0){
        router.replace({
          path: '/playbox',
          query: data
        });
      }else{
        showTipsRecharge.value = true;
      }
    }
  }else{
    // 未登录
    piniaNocache.openLogin();
  }
}

defineExpose({
  closeMenuForH5,
  openMenuForH5
});
</script>

<style lang="scss" scoped>
@import url('./index.scss');
$timer: 0.4s;
$timer2: 0.7s;
.spanname-enter-active {
  // animation: jackInTheBox $timer;
  animation: fadeInLeft $timer;
}
.spanname-leave-active {
  // animation: bounceOutRight $timer;
  animation: fadeOutLeft $timer;
}
.openlogo-enter-active {
  animation: jackInTheBox $timer;
}
.openlogo-leave-active {
  animation: fadeOut 0;
}
.closelogo-enter-active {
  animation: fadeIn $timer;
}
.closelogo-leave-active {
  animation: fadeOut 0;
}
.sysmtemenus-enter-active {
  animation: fadeIn $timer;
}
.sysmtemenus-leave-active {
  animation: fadeOut $timer;
}
.sysmtemenuswrapper-enter-active {
  animation: fadeInLeft $timer;
}
.sysmtemenuswrapper-leave-active {
  animation: fadeOutLeft $timer;
}
.themebutton-enter-active {
  animation: fadeInLeft $timer;
}
.themebutton-leave-active {
  animation: fadeOut 0;
}
</style>
